<template lang="pug">
  kalix-dialog.user-add(title='查看' bizKey="videos" ref="kalixBizDialog" v-bind:formModel.sync="formModel" isView)
    div.el-form(slot="dialogFormSlot")
      input(v-model="formModel.vid" type="hidden")
      el-form-item(label="上级章节" prop="videosName" label-width="120px")
        el-input(v-model="formModel.videosName" disabled)
      el-form-item(label="视频名称" prop="title" v-bind:label-width="labelWidth")
        el-input(v-model="formModel.title")
      el-form-item(label="院系" prop="did" v-bind:label-width="labelWidth")
        el-cascader.long(v-model="didCascader" placeholder="请选择院系信息" :options="options" filterable @change="getDep" :clearable="false" v-bind:show-all-levels="false" change-on-select disabled)
      el-form-item(label="课程" prop="cname" v-bind:label-width="labelWidth")
        el-input(v-model="formModel.cname" readonly)
      el-form-item(label="视频" prop="videoUrl" v-bind:label-width="labelWidth" )
        vue-player(:src="formModel.videoUrl" v-if="formModel.videoUrl != null ? true : false")
        <!--vue-player(:src="formModel.videoUrl" v-show="formModel.videoUrl === null ? false : (formModel.videoUrl === ' ' ? false : true)")-->
        el-input(v-model="video" readonly v-if="formModel.videoUrl != null ? false : true")
      el-form-item(label="学习人数" prop="hits" v-bind:label-width="labelWidth")
        el-input-number(v-model="formModel.hits" disabled)
</template>

<script type="text/ecmascript-6">
  import FormModel from './model'
  import {baseURL} from '../../../../../config/global.toml'
  import {DepartmentsURL, TrainingVideosUrl, CourseURL} from '../../config.toml'
  export default {
    name: 'VideosView',
    data() {
      return {
        formModel: Object.assign({}, FormModel),
        action: baseURL + '/camel/rest/upload',
        labelWidth: '120px',
        newSrc: '',
        video: '无视频',
        options: [],
        VideosName: '',
        didCascader: []
      }
    },
    mounted() {
      this.getDepCascader() // 获取院系信息并以级联形式显示
    },
    methods: {
      init(dialogOption) {
        console.log('---------this.formModel.id------------', this.formModel.cid)
        this.getDid(this.formModel.cid) // 通过视频id获取相应的课程信息
        console.log('---------dialogOption------------', dialogOption)
      },
      getDepCascader() { // 获取院系信息并以级联形式显示
        console.log('getDepCascader========================')
        this.axios.request({
          method: 'GET',
          url: DepartmentsURL + '/getDepCascader'
        }).then(res => {
          console.log('getDepCascader==============', res.data.data)
          this.options = res.data.data
        })
      },
      getDep(val) { // 通过级联获取数据后转成字符串
        let ddid = val.toString().substring(val.toString().lastIndexOf(',') + 1, val.toString().length)
        console.log('ddid========================', ddid)
        this.axios.request({
          method: 'GET',
          url: TrainingVideosUrl + '/getDDidBySelect',
          params: {
            did: ddid
          }
        }).then(res => {
          console.log('getDDidBySelect==============', res.data.data)
          this.items = res.data.data
        })
      },
      getDid(cid) { // 通过课程id获取相应的课程信息以及院系ID
        console.log('2222222222222222:', cid)
        this.axios.request({
          method: 'GET',
          url: CourseURL + '/' + cid,
          params: {
            id: cid
          }
        }).then(res => {
          this.did = res.data.did
          this.formModel.cname = res.data.name
          console.log('did===============', this.did)
          this.getEcho(this.did)
        })
      },
      getEcho(did) { // 通过院系ID 级联回显
        console.log('3333333333333333333333333', did)
        this.axios.request({
          method: 'GET',
          url: DepartmentsURL + '/getEchoByDid', // 通过uri获取级联回显的数据
          params: {
            did: did
          }
        }).then(res => {
          console.log('res===============', res.data.tag)
          this.didCascader = res.data.tag.split(',')
          console.log('this.didCascader==========', this.didCascader)
        })
      }
    }
  }
</script>


<style scoped lang="stylus" type="text/stylus">
  .el-form
    width 80%
    margin auto
    .el-form-item
      width 49%
      display inline-block
    .photo-width
      width 100%
</style>
